
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 引入bootstrap -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
<!-- 引入JQuery  bootstrap.js-->
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<%--<script src="<%=request.getContextPath()%>/js/jquery.validate.min.js"></script>--%>
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>

<html>
<head>
    <title>添加用户页面</title>
</head>
<script type="text/javascript">

    //重置信息
    function reset() {
        $("#user_name").val("");
        $("#user_id").val("");
        $("#sex").val("");
        $("#telephone").val("");
        $("#address").val("");

    }
    //使用ajax提交用户注册信息
    function addUser1() {
        var add = confirm("是否确认添加该用户?");

        var user_id = $("#user_id").val();
        var user_name = $("#user_name").val();
        var sex =$("input[name=sex]:checked").val();
        var telephone = $("#telephone").val();
        var address = $("#address").val();
        if (add == true) {
            $.ajax({
                url: "<%=request.getContextPath()%>/user/addUser",
                type: "POST",
                async: false,
                data: {
                    "user_id": user_id,
                    "user_name": user_name,
                    "sex": sex,
                    "telephone": telephone,
                    "address": address
                },
                dataType: 'text',//返回数据不执行success方法而执行error时注意返回的格式问题
                success: function (data) {
                    if (data == "ok") {
                        alert("添加成功!");
                        location.reload();//页面刷新
                    }
                    else {
                        alert("添加失败!")
                    }

                },
                error: function (data) {
                    alert("操作异常" + data.responseText + data);
                }
            });
        }
        else {
            return false;//不执行添加功能
        }

 }

 //验证用户ID号是否存在
    function ajaxValidate() {
        var user_id=$("#user_id").val();
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/user/userValidate",//提交地址
            data:{"user_id":user_id},//提交数据
            dataType:"text",//返回json格式
            //contentType:"application/json;charset=utf-8",
            success:function(data){
                $("#user_id1").empty();
                if (data=="ok") {//后端传来的msg的值是no,不能注册。反之。

                    $("#user_id").after("<span id='user_id1' style='color:red'>已存在该用户</span>");
                    // $("#remind").html("<font color='red'>抱歉，该用户已被注册，请更换！</font>");
                }else{
                    $("#remind").html("")//如果没有被注册，将提示语清空。
                }
            },
            error:function (data) {
                alert("操作错误");
            }
        });
    }
    //判断用户名
    function user1() {
        var user_name=$("#user_name").val();

        $("#user_name1").empty();
        if(user_name==""||user_name==null){
            $("#user_name").after("<span id='user_name1' style='color:red'>不能为空</span>");
        }
        else if(user_name.length>8||user_name.length<2){
            $("#user_name").after("<span id='user_name1' style='color:red'>长度再2-8之间</span>");
        }

    }
    //判断手机格式
    function telephone1() {
        var telephone=$("#telephone").val();
        var mobile=/^1[3|4|5|8][0-9]\d{8}$/;
        $("#telephone1").empty();
        if(telephone==""||telephone==null){
            $("#telephone").after("<span id='telephone1' style='color:red'>不能为空</span>");
        }
        else if(!mobile.test(telephone)){
            $("#telephone").after("<span id='telephone1' style='color:red'>手机格式错误</span>");
        }
    }
    //判断地址
    function address1(){
        var address=$("#address").val();
        $("#address1").empty();
        if(address==""||address==null){
            $("#address").after("<span id='address1' style='color:red'>不能为空</span>");
        }
    }


</script>
<body>

<div class="container">
    <h1 class="text-center">用户信息添加页面</h1>
    <hr/>
    <br/>
    <div style="text-align: center">
    <div class="form-inline text-center" id="form1">
            <label>用户ID号：</label>
            <input type="text" name="user_id" id="user_id" class="form-control"  onblur="ajaxValidate()" required=true/>
             <%--<span id="remind" color="red"></span>--%>
        <br/>
        <br/>
        <div class="form-group form-inline">
            <label>用户姓名：</label>
            <input type="text" name="user_name" id="user_name" class="form-control" onblur="user1()" required=true />

        </div>
        <br/>
        <br/>
        <%--<div class="form-group form-inline">--%>
            <%--<label>用户性别：</label>--%>
            <%--<input type="text" name="sex" id="sex" class="form-control"/>--%>
        <%--</div>--%>


            <div class="col-sm-11">
                <label>用户性别：</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="sex1_revise_input" value="男" checked="checked"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="sex2_revise_input" value="女"> 女
                </label>
            </div>



        <br/>
        <br/>
        <div class="form-group form-inline">
            <label>用户电话：</label>
            <input type="text" name="telephone" id="telephone" class="form-control" required=true onblur="telephone1()"/>
        </div>
        <br/>
        <br/>
        <div class="form-group form-inline">
            <label>用户地址：</label>
            <input type="text" name="address" id="address" class="form-control" required=true onblur="address1()"/>
        </div>
        <br/>
        <br/>
        <br/>

        <button class="btn btn-info text-center" onclick="addUser1()">提交</button>


        <button type="reset" class="btn btn-danger" onclick="reset()">重置</button>
    </div>
    </div>

</div>

</body>
</html>
